<!--建立考核模板首页 -->
<template>
  <div>
    <div style="height: 700px; margin: 25px" v-if="!viewProgress1">
      <span style="display:flex; justify-content:space-between;width:100%;align-items:center">
        <!-- 考核模板 -->
        <el-row class="createMUban">
          <h3>考核评估</h3>
        </el-row>
        <!-- 查询搜索 -->

        <span>
          <el-form style="display:flex;" :model="ruleForm1" ref="ruleForm1">
            <el-form-item label="类型">
              <el-select
                clearable
                placeholder="请选择"
                style="width:50%;"
                v-model="ruleForm1.years"
                @change="changeOne"
              >
                <el-option label="年度" value="3"></el-option>
                <el-option label="季度" value="2"></el-option>
                <el-option label="月度" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年份" style="margin-left:-40px" v-if="nians">
              <el-date-picker
                style="width:51%;"
                v-model="ruleForm1.quarter"
                type="year"
                value-format="yyyy年"
                format="yyyy年"
                placeholder="年份"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="季度" style="margin-left:-40px" v-if="jidus">
              <el-select placeholder="请选择" style="width:51%;" v-model="ruleForm1.quarter">
                <el-option label="第一季度" value="第一季度"></el-option>
                <el-option label="第二季度" value="第二季度"></el-option>
                <el-option label="第三季度" value="第三季度"></el-option>
                <el-option label="第四季度" value="第四季度"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="月份" style="margin-left:-40px" v-if="yues">
              <el-date-picker
                style="width:64%;"
                v-model="ruleForm1.quarter"
                type="month"
                format="yyyy年MM月"
                value-format="yyyy-MM"
                placeholder="月份"
              ></el-date-picker>
            </el-form-item>
            <el-button @click="sousuo" type="primary" style="height:40px;">搜索</el-button>
          </el-form>
        </span>
      </span>
      <!-- 表格信息 -->
      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%; color: #333333; font-size: 14px"
          height="700"
          align="center"
          :header-cell-style="{ background: '#ECF1F9' }"
        >
          <el-table-column fixed type="index" align="center" label="编号"></el-table-column>
          <el-table-column prop="name" align="center" label="考核名称"></el-table-column>
          <!-- <el-table-column prop="period" align="center" label="考核年份" width="120"></el-table-column> -->
          <el-table-column prop="period" align="center" label="考核阶段" width="120"></el-table-column>
          <el-table-column prop="beginTime" align="center" label="考核开始时间" width="200"></el-table-column>
          <el-table-column prop="endTime" align="center" label="考核截止时间" width="200"></el-table-column>
          <el-table-column prop="templateName" align="center" label="考核模板"></el-table-column>
          <!-- <el-table-column
            prop="processes"
            :show-overflow-tooltip="true"
            align="center"
            label="被考核人员"
          >
            <template slot-scope="tags">
              <span
                v-for="(item,index) in tags.row.assessorUsers"
                :key="item.index"
              >{{item.name+' '}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="40">
            <template slot-scope="scope">
              <a @click="openPeopleList(scope.row)">
                <i>
                  <img src="@/assets/kaohePng/yanJing.png" />
                </i>
              </a>
            </template>
          </el-table-column>-->
          <el-table-column prop="assessState" align="center" label="状态" width="120">
            <template v-slot="scope">
              <!-- {{ scope.row.status === 1 ? "是" : "否" }} -->
              <span v-if="scope.row.assessState === 0" style="color:red">未开始</span>
              <span v-else-if="scope.row.assessState === 1" style="color:#79c79c">进行中</span>
              <span v-else style="color:#ccc">已结束</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="editRow(scope.row)"
                type="text"
                size="small"
                style="color: #3B95FF"
              >进入评估</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-pagination
            style="text-align: right;margin-top:16px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </el-row>
    </div>
    <el-dialog
      title="被考核人员"
      :visible.sync="centerDialogVisible"
      width="20%"
      style="border-radius:10px"
      center
    >
      <div style="width:100%;height:auto;border: 1px solid #E4E4E4;padding:2%;border-radius:5px">
        <template>
          <span v-for="(item,index) in this.nameList" :key="item.index">{{item+'、'}}</span>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <viewProgress1 v-if="viewProgress1" :dataTypes="dataTypes" @giveFather="updateTitle"></viewProgress1>
  </div>
</template>
  
  <script>
import {
  getJilugList,
  deleteAssessment,
  addAssessment,
  getMubanList,
  getUserId,
  userOneStep
} from "@/api2/kaohe"; //
import viewProgress1 from "./components/viewProgress1.vue";
export default {
  components: {
    viewProgress1: viewProgress1
  },
  data() {
    return {
      centerDialogVisible: false,
      dataTypes: [],
      viewProgress1: false,
      disabled: true,
      nian: false,
      jidu: false,
      yue: false,
      nians: false,
      jidus: false,
      yues: false,
      options: [],
      formLabelWidth: "130px", //label-width
      tableData: [],
      userIds: "",
      muBan: [],
      nameList: [],
      addTarget: false,
      pageNum: 1, //当前页
      total: 0, //总条数updateTitle
      // tableData: [], //当前页码的表格数据
      pageSize: 10, //当前页容量
      ruleForm: {
        assessState: 0,
        assessTemplateName: "",
        assessTemplateId: "",
        assessTemplatePeriod: "",
        assessorUserId: "",
        beginTime: "",
        createBy: "",
        createTime: "",
        deFlag: 0,
        endTime: "",
        id: "",
        name: "",
        number: 0,
        params: {},
        period: "",
        scoreType: 0,
        updateBy: "",
        updateTime: ""
      },
      ruleForm1: {
        years: "",
        quarter: ""
      },
      //规则校验
      rules: {
        //指标名称校验
        assessTemplateId: [
          { required: true, message: "考核模板必选", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入考核表名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],
        period: [{ required: true, message: "周期必选", trigger: "change" }],
        beginTime: [
          { required: true, message: "考核开始时间必选", trigger: "change" }
        ],
        endTime: [
          { required: true, message: "考核截止时间必选", trigger: "change" }
        ],
        assessorUserId: [
          {
            required: true,
            message: "被考核人员不能少于一个",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getUserIds();
    this.getMubanLists(); //获取所有考核模板
  },
  methods: {
    openPeopleList(e) {
      console.log(e);
      let list = [];
      e.assessorUsers.forEach(item => {
        list.push(item.name);
      });

      this.nameList = list;
      console.log(this.nameList);
      this.centerDialogVisible = true;
    },
    //获取用户基本信息
    getUserIds() {
      console.log(this.userIds);
      setTimeout(() => {
        getUserId()
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              // this.userIds == res.data.id;
              this.getJilugLists(res.data.id); //获取表格数据(res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
      console.log(this.userIds);
    },
    updateTitle(e) {
      //声明这个函数
      this.viewProgress1 = e;
    },
    //查看进展
    editRow(rows) {
      console.log(rows);
      this.viewProgress1 = true;
      this.dataTypes = rows;
    },
    close(formName) {
      this.$refs[formName].resetFields();
      this.addTarget = false;
      this.ruleForm = {
        assessState: 0,
        assessTemplateName: "",
        assessTemplateId: "",
        assessTemplatePeriod: "",
        assessorUserId: "",
        beginTime: "",
        createBy: "",
        createTime: "",
        deFlag: 0,
        endTime: "",
        id: "",
        name: "",
        number: 0,
        params: {},
        period: "",
        scoreType: 0,
        updateBy: "",
        updateTime: ""
      };
    },
    async changeOne(e) {
      console.log(e);
      if (e == 1) {
        this.yues = true;
        this.nians = false;
        this.jidus = false;
        this.ruleForm1.quarter = "";
      } else if (e == 2) {
        this.yues = false;
        this.nians = false;
        this.jidus = true;
        this.ruleForm1.quarter = "";
      } else {
        this.yues = false;
        this.nians = true;
        this.jidus = false;
        this.ruleForm1.quarter = "";
      }
    },
    //查询接口
    sousuo() {
      if (this.ruleForm1.years == "" && this.ruleForm1.quarter == "") {
        const params = this.userIds;
        this.getJilugLists(params); //获取表格数据
      } else {
        const params = {
          type: this.ruleForm1.years,
          period: this.ruleForm1.quarter,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          queryType: "3",
          userId: this.userIds
        };
        getJilugList(params)
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              res.data.sort(
                (a, b) =>
                  new Date(b.createTime).getTime() -
                  new Date(a.createTime).getTime()
              ); //这是升序，倒序的话翻过来
              this.tableData = res.data;
              this.total = res.total; //总条数
            }
          })
          .catch(e => {
            console.log(e);
          });
      }
    },
    //获取所有考核模板
    async getMubanLists() {
      const res = await getMubanList();
      console.log(res.data);
      this.muBan = res.data;
    },
    async changeMuban(e) {
      const res = await getMubanList();
      res.data.forEach(item => {
        if (item.id == e) {
          this.ruleForm.assessTemplatePeriod = item.period;
          console.log(item);
          if (item.period == 1) {
            this.yue = true;
            this.nian = false;
            this.jidu = false;
          } else if (item.period == 2) {
            this.yue = false;
            this.nian = false;
            this.jidu = true;
          } else {
            this.yue = false;
            this.nian = true;
            this.jidu = false;
          }
          this.options = item.assessorUsers;
          this.disabled = false;
          // this.ruleForm.assessTemplateName)
          // this.ruleForm.period = item.period;
        }
      });
    },
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getJilugLists(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      const params = JSON.parse(sessionStorage.getItem("loginUserinfo")).uid;
      this.getJilugLists(params);
    },
    //获取表格数据
    getJilugLists(e) {
      console.log(e);
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        queryType: "3",
        userId: e
      };
      getJilugList(params)
        .then(res => {
          console.log(res);
          if (res.code == 0) {
            res.data.sort(
              (a, b) =>
                new Date(b.createTime).getTime() -
                new Date(a.createTime).getTime()
            ); //这是升序，倒序的话翻过来
            this.userIds = e;
            this.tableData = res.data;
            this.total = res.total; //总条数
          }
        })
        .catch(e => {
          console.log(e);
        });
    }
    //发起考核
  }
};
</script>
  
  <style lang="scss" scoped>
.createMUban {
  display: inline-flex;
  align-items: center;
}
/* 共同样式 */
.add_dimension {
  color: blue;
}
.delete_dimension {
  color: red;
}
.add_dimension:hover {
  color: rgb(72, 72, 234);
}
.delete_dimension:hover {
  color: rgb(245, 71, 71);
}
.nextOne {
  margin-top: 25px;
  margin-left: 45%;
  background-color: #0096fe;
}
::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}
// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}
// ::v-deep .el-input--suffix .el-input__inner {
//   height: 25px;
//   border-radius: 0%;
// }
// ::v-deep .el-input__inner {
//   height: 25px;
//   border-radius: 0%;
// }
::v-deep .el-dialog__header {
  background-color: #ecf1f9;
  border-radius: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-tooltip__popper {
  max-width: 10%;
}

::v-deep .el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>
  